<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
  <meta charset="UTF-8">
  <myHead th:replace="basic/layout :: head(${user.id != null ? '编辑用户' : '新增用户'})"></myHead>
</head>
<body>
<div th:replace="basic/layout :: topNav('back')"></div>
<div class="row">
  <div th:replace="basic/layout :: menu"></div>
  
  <div class="col-10">
    <div class="container mt-4">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card shadow-sm">
            <div class="card-header">
              <h4 th:text="${user.id != null ? '编辑用户' : '新增用户'}"></h4>
            </div>
            <div class="card-body">
              <!-- 表单提交 -->
              <form th:action="@{/users/save}" method="post" th:object="${user}">
                <!-- 隐藏ID（编辑时使用） -->
                <input type="hidden" th:field="*{id}">
                
                <!-- 用户名（新增必填，编辑不可改） -->
                <div class="mb-3">
                  <label for="username" class="form-label">用户名 <span class="text-danger">*</span></label>
                  <input type="text" id="username" th:field="*{username}"
                         class="form-control"
                         th:readonly="${user.id != null}"
                         required>
                </div>
                
                <!-- 昵称 -->
                <div class="mb-3">
                  <label for="nickname" class="form-label">昵称 <span class="text-danger">*</span></label>
                  <input type="text" id="nickname" th:field="*{nickname}"
                         class="form-control" required>
                </div>
                
                <!-- 邮箱 -->
                <div class="mb-3">
                  <label for="email" class="form-label">邮箱</label>
                  <input type="email" id="email" th:field="*{email}" class="form-control">
                </div>
                
                <!-- 手机号 -->
                <div class="mb-3">
                  <label for="phone" class="form-label">手机号</label>
                  <input type="tel" id="phone" th:field="*{phone}" class="form-control">
                </div>
                
                <!-- 状态 -->
                <div class="mb-3">
                  <label for="status" class="form-label">状态 <span class="text-danger">*</span></label>
                  <select id="status" th:field="*{status}" class="form-select" required>
                    <option value="1">正常</option>
                    <option value="0">禁用</option>
                  </select>
                </div>
                
                <!-- 角色选择（权限核心） -->
                <div class="mb-3">
                  <label class="form-label">关联角色 <span class="text-danger">*</span></label>
                  <div class="row g-2">
                    <!-- 循环所有角色，已选角色勾选 -->
                    <div class="col-md-6" th:each="role : ${allRoles}">
                      <div class="form-check">
                        <input type="checkbox" class="form-check-input"
                               th:id="|role_${role.id}|"
                               th:name="roleIds"
                               th:value="${role.id}"
                               th:checked="${userRoleIds != null and userRoleIds.contains(role.id)}">
                        <label class="form-check-label" th:for="|role_${role.id}|"
                               th:text="${role.roleName + '(' + role.roleCode + ')'}"></label>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="mt-4">
                  <button type="submit" class="btn btn-primary me-2">保存</button>
                  <a href="/users" class="btn btn-outline-secondary">取消</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>